<template>
  <div class="ele-body aging">
    <el-card shadow="never">
      <CustomSelect label="工单类型：" @input="query" v-model="queryForm.work_order_type" :selectOptions="options1"/>
    </el-card>
    <el-card shadow="never">
      <!-- 搜索表单 -->
      <el-form ref="form" :model="queryForm" class="ele-form-search" label-width="auto" @keyup.enter.native="query"
               @submit.native.prevent>
        <el-row :gutter="15"  type="flex" style="flex-wrap: wrap">

          <el-col  :lg="6" :md="12">
            <el-form-item label="选择人员：" prop="user_id">
              <el-select
                v-model="queryForm.user_id"
                filterable
                remote
                clearable
                reserve-keyword
                style="width: 100%"
                placeholder="请搜索人员名称"
                :remote-method="remoteMethod"
                :loading="loading">
                <el-option
                  v-for="item in options3"
                  :key="item.id"
                  :label="item.realname"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col  :lg="6" :md="12">
            <el-form-item label="部门：" prop="department">
              <el-select v-model="queryForm.department" placeholder="请选择部门" style="width: 100%">
                <el-option
                  v-for="item in options2"
                  :key="item.value"
                  :label="item.name"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col  :lg="6" :md="12">
            <el-form-item label="选择时间：" prop="date">
              <CustomDate :type.sync="queryForm.type" v-model="queryForm.date"/>
            </el-form-item>
          </el-col>
          <el-col :lg="6" :md="12">
            <div class="ele-form-actions">
              <el-button :loading="loading" class="ele-btn-icon" icon="el-icon-search" type="primary" @click="query">
                查询
              </el-button>
              <el-button @click="reset">重置</el-button>
            </div>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <el-card class="ele-body" shadow="never">
      <div class="content">
        <div>
          <Echarts3 @satisfaction="getSatisfaction" v-loading="loading" :data="pieChartData"/>
        </div>
        <div>
          <Echarts5 v-loading="loading" :data="histogramData"/>
        </div>
      </div>
    </el-card>
    <el-card class="ele-body" shadow="never" v-if="satisfaction" >
      <WorkOrder :sat="satisfaction" :query="queryForm"/>
    </el-card>
  </div>
</template>
<script>
import CustomDate from "./components/CustomDate.vue"
import Echarts3 from "./components/Echarts3.vue"
import Echarts5 from "./components/Echarts5.vue"
import CustomSelect from "@/views/reports/workorder-monitoring/components/CustomSelect.vue";
import WorkOrder from "@/views/reports/workorder-monitoring/components/work-order.vue";

export default {
  components: {CustomDate, Echarts3, Echarts5, CustomSelect,WorkOrder},
  data() {
    return {
      loading: false,
      queryForm: {
        user_id:null,
        type: null,
        date: [],
        work_order_type: null,
        personnel: null,
        department: null,
      },
      options1: [],
      options2: [],
      options3: [],
      pieChartData: '',
      histogramData: '',
      satisfaction:'',
    }
  },
  mounted() {
    this.query()
    this.getParams()
  },
  methods: {
    /*搜索人员*/
    getSatisfaction(satisfaction){
      this.satisfaction = satisfaction
    },
    remoteMethod(query) {
      if (query !== '') {
        this.loading = true;
        this.$http.get(`/user/index?limit=10&realname=${query} `).then((res) => {
          this.options3 = res.data.data.filter(item => {
            return item.id !== 1
          });
          this.loading = false;
        });
      } else {
        this.options = [];
        this.loading = false;
      }
    },
    getParams() {
      this.$http.get('wos/params').then(res => {
        if (res.data.code === 0) {
          this.options1 = res.data.data.wo_types.map(item => {
            return {label: item, value: item}
          })
        } else {
          this.$message.error(res.data.msg);
        }
      })
      this.$http.get('dept/index').then(res => {
        if (res.data.code === 0) {
          this.options2 = res.data.data
        } else {
          this.$message.error(res.data.msg);
        }
      })
    },
    query() {
      let form = {...this.queryForm}
      this.satisfaction = ''
      delete form.date
      if (this.queryForm.date.length) {
        form.month_start = this.queryForm.date[0]
        form.month_end = this.queryForm.date[1]
      }
      this.handleQueryPieChart(form)
    },

    reset() {
      this.$refs.form.resetFields()
      this.queryForm.work_order_type = null
      this.query()
    },
    //数据
    async handleQueryPieChart(form) {
      this.loading = true
      const res = await this.$http.get('/reports/customer_satisfaction', {params: form})
      res.data?.success ? this.pieChartData = res.data.data : this.$message.error(res.data.msg);
      res.data?.success ? this.histogramData = res.data.data : this.$message.error(res.data.msg);
      this.loading = false
    },
  },
}
</script>

<style scoped lang="scss">

.aging {
  div:nth-child(2) {
    ::v-deep.el-card__body {
      padding-bottom: 0;
    }
  }
}

.content {
  display: flex;
  justify-content: space-between;

  div:nth-child(1) {
    flex: 1;
  }

  div:nth-child(2) {
    flex: 1.2;
  }
}

</style>
